<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/pages/common/component.jsp"%>

<html>
<head>
<title>报表</title>

<script type="text/javascript">

var columnchartOptions = 
{
	chart: {
		renderTo: '',
		defaultSeriesType: 'column'
	},
	title: {
		text: ''
	},
	subtitle: {
		text: ''
	},
	xAxis: {
		categories: []
	},
	yAxis: {
		title: {
			text: '贡献值(元)'
		},
		startOnTick : false
	},
	tooltip: {
		formatter: function() {
			return ''+
				this.x +'月份: '+this.series.name+'贡献值'+this.y+'元';
		}
	},
	plotOptions: {
		column: {
			pointPadding: 0.2,
			borderWidth: 0
		}
	},
    series: []
}

var piechartOptions = 
{
	chart: {
		renderTo: '',
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false
	},
	title: {
		text: ''
	},
	subtitle: {
		text: ''
	},
	tooltip: {
		formatter: function() {
			return '<b>'+ this.point.name +'</b>'+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
		}
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				color: '#000000',
				connectorColor: '#000000',
				formatter: function() {
					return '<b>'+ this.point.name +'</b>'+ this.y +'元,'+Highcharts.numberFormat(this.percentage, 1)+'%';
				}
			},
			point: {
             	events : {   
                	click : function(){//绑定饼图每个子节点的click事件
						
                   	}
            	}
          	}   
		}
	},
    series: [{
		type: 'pie',
		name: 'Browser share',
		data: [] 
	}]
};

// 更换显示报表
function getContributeChart(yearDate, chartType){
	$.ajax({
	    type: "POST",
	    url: "chartAction.do",
	    data:  "method=getContributeChart&yearDate="+yearDate+"&chartType="+chartType,
	    dataType:"json",
	    async: false,
	    cache: false,
	    success: function(json){
	    	if('<%=Constants.CHART_TYPE_COLUMN%>' == chartType){ // 获取Column报表
		    	columnchartOptions.title.text = json.title;
		    	columnchartOptions.subtitle.text = json.subtitle;
				columnchartOptions.series = json.series;
				columnchartOptions.xAxis.categories = json.categories;
				columnchartOptions.chart.renderTo='contribute_container';
				new Highcharts.Chart(columnchartOptions);
			}else if('<%=Constants.CHART_TYPE_PIE%>' == chartType){ // 获取Pie报表
				piechartOptions.title.text = json.title;
		    	piechartOptions.subtitle.text = json.subtitle;
				piechartOptions.series[0].data = json.data;
				piechartOptions.chart.renderTo='contribute_container';
				new Highcharts.Chart(piechartOptions);
			}else{
				alert('没有对应的报表类型:'+chartType);
			}
	    },
	    error: function(msg){
	       	alert("查询数据出错!请稍后再试!");
	    }
   	});
}

$(document).ready(function(){
	$('#column_container').bgiframe();
	getContributeChart('<fmt:formatDate value="<%=new Date()%>" pattern="yyyy" type="date"/>', '<%=Constants.CHART_TYPE_COLUMN%>');
  	configDate("yearDate", '<fmt:formatDate value="<%=new Date()%>" pattern="yyyy" type="date"/>', 'yy');
});

function changeYear(year){
	// 重新定义日期范围
	var dYearIntervalDay = getYearIntervalDay(year);
	// 给年报表的标题赋值
	getContributeChart(year, '<%=Constants.CHART_TYPE_COLUMN%>');
}

</script>
</head>
<body>
<html:form method="post" styleId="chartForm" action="chartAction.do">
<table width='98%'  border='0' cellpadding='1' cellspacing='1' bgcolor='#CBD8AC' align="center" style="margin-top:8px; text-align: center;">
 <tr>
  <th colspan="2" align="center">
  	年份:<input id="yearDate" name="yearDate" readonly="readonly" style='width:80px;' onchange="changeYear(this.value)"/>&nbsp;&nbsp;&nbsp;
   	报表类型:
   	<select id="chartType" name="chartType" onchange="getContributeChart('2011', this.value)">
   		<option value="column">柱形图</option>
   		<option value="pie">饼图</option>
   	</select>
  </th>
 </tr>
</table>
<br/>
</html:form>
<div id="contribute_container" style="width: 1000px; height: 500px; margin: 0 auto"></div>
</body>
</html>